<template>
  <div>
    <el-input v-model="dataForm[attrName]"
              :type="inputType"
              :autosize="{ minRows: minRows, maxRows: maxRows}"
              :placeholder="placeholder"
              :clearable="clearable"
              :readonly="readonly"
              :disabled="disabled"
              @input="forceUpdate"
    ></el-input>
    <span v-if="passwordInput" class="show-pwd" @mousedown="inputType = 'text'" @mouseup="inputType = 'password'">
      <icon-svg :name="inputType === 'password' ? 'eye' : 'eye-open'"></icon-svg>
    </span>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalInput',
  mixins: [basicMixins],
  props: ['clearable', 'readonly', 'disabled', 'inputType', 'minRows', 'maxRows'],
  data() {
    return {
      passwordInput: false
    }
  },
  watch: {
    dataForm: {
      deep: true,
      handler() {
        this.forceUpdate()
      }
    }
  },
  mounted() {
    this.passwordInput = this.R.equals('password', this.inputType)
  }
}
</script>

<style scoped>
.show-pwd {
  position: absolute;
  right: 20px;
}
</style>
